<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0, user-scalable=no，viewport-fit=cover">
		<meta name="format-detection" content="telephone=no" />
		<title></title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<div style="display: flex;font-size: 50px;">
			<div style="width: 33.3%;">
				<table style="width: 100%;color:#FFFFFF">
					<tr>
						<th style="background-color:#CD4339;width: 50%;">品名</th>
						<th style="background-color:#CD4339;width: 50%;">售价</th>
					</tr>
				</table>
				<table style="width: 100%;color:#FFFFFF" id="list1">

				</table>
			</div>
			<div style="width: 33.3%;">
				<table style="width: 100%;color:#FFFFFF">
					<tr>
						<th style="background-color:#CD4339;width: 50%;">品名</th>
						<th style="background-color:#CD4339;width: 50%;">售价</th>
					</tr>
				</table>
				<table style="width: 100%;color:#FFFFFF" id="list2">

				</table>
			</div>
			<div style="width: 33.3%;">
				<table style="width: 100%;color:#FFFFFF">
					<tr>
						<th style="background-color:#CD4339;width: 50%;">品名</th>
						<th style="background-color:#CD4339;width: 50%;">售价</th>
					</tr>
				</table>
				<table style="width: 100%;color:#FFFFFF" id="list3">

				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function httpRequest(paramObj, callback, errFun) {
			var xmlhttp = null;
			/*创建XMLHttpRequest对象，
			 *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
			 * */
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			/*判断是否支持请求*/
			if (xmlhttp == null) {
				alert('你的浏览器不支持XMLHttp');
				return;
			}
			/*请求方式，并且转换为大写*/
			var httpType = (paramObj.type || 'GET').toUpperCase();
			/*数据类型*/
			var dataType = paramObj.dataType || 'json';
			/*请求接口*/
			var httpUrl = paramObj.httpUrl || '';
			/*是否异步请求*/
			var async = paramObj.async || true;
			/*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
			var paramData = paramObj.data || [];
			var requestData = '';
			for (var name in paramData) {
				requestData += name + '=' + paramData[name] + '&';
			}
			requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);

			/*接口连接，先判断连接类型是post还是get*/
			if (httpType == 'GET') {
				xmlhttp.open("GET", httpUrl, async);
				xmlhttp.send(null);
			} else if (httpType == 'POST') {
				xmlhttp.open("POST", httpUrl, async);
				//发送合适的请求头信息
				xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlhttp.send(requestData);
			}

			/*请求接收*/
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					/*成功回调函数*/
					callback(xmlhttp.responseText);
				} else {
					/*失败回调函数*/
					errFun;
				}
			}
		}


		var Interval;
		window.onload = function() {
			getdata('/api/getsingleactiveskus');
			setInterval(function() {
				window.clearInterval(Interval);
				getdata('/api/getsingleactiveskus');
			}, 60000);

			setInterval(function() {
				location.reload()
			}, 1200000)

			let clientHeight = (window.innerHeight - 46) / 11;
			let trElList = document.querySelectorAll('table tr');
			trElList.forEach((item, index) => {
				item.style.height = clientHeight + 'px';
			})
		}

		function getdata(url) {
			/*请求参数*/
			var paramObj = {
				httpUrl: 'http://' + window.location.host + url,
				type: 'get',
			}
			/*请求调用*/
			httpRequest(paramObj, function(respondDada) {
				//这里编写成功的回调函数
				respondDada = JSON.parse(respondDada)
				if (respondDada.code == 0) {

					if (document.getElementById("alertbgDiv")) {
						closewin()
					}

					getdata1('/api/getpromotionskus', respondDada);
				} else if (respondDada.code == 3) {
					Alert('未登录暂无数据')
				}
			}, function() {
				alert('网络错误')
			});
		}

		function getdata1(url, data) {
			/*请求参数*/
			var paramObj = {
				httpUrl: 'http://' + window.location.host + url,
				type: 'get',
			}
			/*请求调用*/
			httpRequest(paramObj, function(respondDada) {
				respondDada = JSON.parse(respondDada)
				//这里编写成功的回调函数
				if (respondDada.code == 0) {
					if (document.getElementById("alertbgDiv")) {
						closewin()
					}
					createdata(respondDada, data)
				} else if (respondDada.code == 3) {
					Alert('未登录暂无数据')
				}

			}, function() {
				alert('网络错误')
			});
		}

		var alllist = new Array()

		function createdata(respondDada, data) {
			var list = []
			var list1 = []
			var cuxiaolist = []
			if (respondDada.data) {
				cuxiaolist = respondDada.data
			}

			if (data.data) {
				if (data.data.length > 0) {
					list = data.data.splice(0, 30)
				}

				if (data.data.length > 0) {
					list1 = data.data.splice(0, 30)
				}
			}


			alllist = []
			if (list.length > 0) {
				alllist.push({
					list: list
				})
			}

			if (list1.length > 0) {
				alllist.push({
					list: list1
				})
			}


			if (cuxiaolist.length > 0) {
				alllist.push({
					list: cuxiaolist
				})
			}

			createdom(alllist[0].list)

			var i;

			if (alllist.length == 1) {
				i = 0
			} else if (alllist.length >= 2) {
				i = 1
			}

			Interval = setInterval(function() {
				createdom(alllist[i].list)
				if (i >= alllist.length - 1) {
					i = -1
				}
				i++;
			}, 60000);
		}


		function createdom(list) {
			document.getElementById("list1").innerHTML = "";
			document.getElementById("list2").innerHTML = "";
			document.getElementById("list3").innerHTML = "";
			var j = 0
			for (var i = 0; i < list.length; i++) {
				var price;
				if (list[i].categoryid.indexOf("030") != -1) {
					price = list[i].originalprice;
				} else {
					price = list[i].promotionprice;
				}

				var tr = document.createElement('tr');
				var htmlstr = '<td style="background-color:#000000;width: 50%;text-align: center;padding: 13px 0;">' + list[i].skuname +
					'</td><td style="background-color:#000000;width: 50%;text-align: center;">' + price + '元/' + list[i].saleunit +
					"</td>";
				tr.innerHTML = htmlstr;
				if (j == 0) {
					document.getElementById("list1").appendChild(tr)
				} else if (j == 1) {
					document.getElementById("list2").appendChild(tr)
				} else {
					document.getElementById("list3").appendChild(tr)
					j = -1
				}
				j++;
			}

			let clientHeight = (window.innerHeight - 46) / 11;
			let trElList = document.querySelectorAll('table tr');
			trElList.forEach((item, index) => {
				item.style.height = clientHeight + 'px';
			})
		}

		function Alert(str) {
			var msgw, msgh, bordercolor;
			msgw = 700; //提示窗口的宽度    
			msgh = 300; //提示窗口的高度    
			titleheight = 25 //提示窗口标题高度    
			bordercolor = "#336699"; //提示窗口的边框颜色    
			titlecolor = "#99CCFF"; //提示窗口的标题颜色    
			var sWidth, sHeight;
			//获取当前窗口尺寸    
			sWidth = document.body.offsetWidth;
			sHeight = document.body.offsetHeight;
			//    //背景div    
			var bgObj = document.createElement("div");
			bgObj.setAttribute('id', 'alertbgDiv');
			bgObj.style.position = "absolute";
			bgObj.style.top = "0";
			bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
			bgObj.style.opacity = "0.6";
			bgObj.style.left = "0";
			bgObj.style.width = sWidth + "px";
			bgObj.style.height = sHeight + "px";
			bgObj.style.zIndex = "10000";
			document.body.appendChild(bgObj);
			//创建提示窗口的div    
			var msgObj = document.createElement("div")
			msgObj.setAttribute("id", "alertmsgDiv");
			msgObj.setAttribute("align", "center");
			msgObj.style.background = "white";
			msgObj.style.border = "1px solid " + bordercolor;
			msgObj.style.position = "absolute";
			msgObj.style.left = "50%";
			msgObj.style.font = "14px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
			//窗口距离左侧和顶端的距离     
			msgObj.style.marginLeft = "-350px";
			//窗口被卷去的高+（屏幕可用工作区高/2）-150    
			msgObj.style.top = document.body.scrollTop + (window.screen.availHeight / 2) - 200 + "px";
			msgObj.style.width = msgw + "px";
			msgObj.style.height = msgh + "px";
			msgObj.style.textAlign = "center";
			msgObj.style.lineHeight = "25px";
			msgObj.style.zIndex = "10001";
			document.body.appendChild(msgObj);
			//提示信息标题    
			var title = document.createElement("p");
			title.setAttribute("id", "alertmsgTitle");
			title.setAttribute("align", "left");
			title.style.margin = "0";
			title.style.padding = "20px";
			title.style.background = bordercolor;
			title.style.filter =
				"progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
			title.style.opacity = "0.75";
			title.style.border = "1px solid " + bordercolor;
			title.style.font = "20px Verdana, Geneva, Arial, Helvetica, sans-serif";
			title.style.color = "white";
			title.innerHTML = "提示信息";
			document.getElementById("alertmsgDiv").appendChild(title);
			//提示信息    
			var txt = document.createElement("p");
			txt.setAttribute("id", "msgTxt");
			txt.style.margin = "75px 0 0 0";
			txt.style.fontSize = "18px";
			txt.innerHTML = str;
			document.getElementById("alertmsgDiv").appendChild(txt);
			//设置关闭时间    
			// window.setTimeout("closewin()", 2000);
		}

		function closewin() {
			document.body.removeChild(document.getElementById("alertbgDiv"));
			document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));
			document.body.removeChild(document.getElementById("alertmsgDiv"));
		}
	</script>
</html>
